<template>
  <div class="lg:flex">
    <Avatar :src="userInfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
      <h1 class="md:text-lg text-md"
        >{{ userInfo.nickName }} ，期待你在此尽情施展才华，达成工作新高度！</h1
      >
      <span class="text-secondary" v-if="Number(workingDays) > 0"
        >今天是来公司的第<span style="margin: 0 5px"
          ><strong>{{ workingDays }}</strong></span
        >天, 开始您一天的工作吧！</span
      >
      <span class="text-secondary">
        {{ userInfo.tenantName }} <span style="margin-left: 10px">{{ currentTime }} </span></span
      >
    </div>
    <div class="flex flex-1 justify-end md:mt-0 mt-4">
      <div class="flex flex-col justify-center text-right">
        <span class="text-secondary"> 待办 </span>
        <span class="text-2xl">2</span>
      </div>

      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
        <span class="text-secondary"> 待阅 </span>
        <span class="text-2xl">8</span>
      </div>
      <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
        <span class="text-secondary"> 团队 </span>
        <span class="text-2xl">300</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onBeforeUnmount, ref } from 'vue';
  import { Avatar } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';
  import headerImg from '@/assets/images/header.jpg';
  import { formatToDateTimeCn } from '@/utils/dateUtil';

  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);
  const workingDays = ref('1552');
  const currentTime = ref(formatToDateTimeCn(new Date()));
  // 运行定时器，一秒获取一次
  const interval = window.setInterval(() => {
    currentTime.value = formatToDateTimeCn(new Date());
  }, 1000);
  // 这个界面不在我们视线中的时候，关闭定时器
  onBeforeUnmount(() => {
    window.clearInterval(interval);
  });
</script>
